<template>
  <div class="secondCategory">
    <el-button type="primary" style='margin-bottom:20px' @click="addBrandSubmit">添加品牌</el-button>
    <el-table ref="multipleTable" :border="true" :data="secondCategoryData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="品牌编号" width="80">
      </el-table-column>
      <el-table-column prop="brandName" label="品牌名称" width="120">
      </el-table-column>
      <el-table-column label="品牌logo" width="250">
        <template slot-scope="scope">
          <img :src="'http://127.0.0.1:3000'+scope.row.brandLogo" alt="" style="height:100px">
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="所属分类" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加品牌对话框 -->
    <el-dialog title="添加品牌" :visible.sync="addCategoryFormVisible">
      <el-form :model="addForm" label-width="100px" ref='addfrom'>
        <el-form-item label="品牌名称">
          <el-input v-model="addForm.brandName"></el-input>
        </el-form-item>
        <el-form-item label="所属分类id">
          <el-select v-model="addForm.categoryId" style="width:100%" @change='changeCid'>
            <el-option :label="item.categoryName" :value="item.id" v-for="item in categoryIdList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-upload :with-credentials='true' style="margin-left:100px" class="upload-demo" action="http://127.0.0.1:3000/category/addSecondCategoryPic" name="pic1" :on-success='uploadSuccess' :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCategoryFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('addfrom')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑品牌对话框 -->
    <el-dialog title="编辑品牌" :visible.sync="editCategoryFormVisible">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="品牌id">
          <el-input v-model="editForm.id" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
          <el-input v-model="editForm.brandName"></el-input>
        </el-form-item>
        <el-form-item label="所属分类id">
          <el-select v-model="editForm.categoryId" style="width:100%" @change='changeCid'>
            <el-option :label="item.categoryName" :value="item.id" v-for="item in categoryIdList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="value" style="width:100%" @change='isDeleteEvent'>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-upload :with-credentials='true' style="margin-left:100px" class="upload-demo" action="http://127.0.0.1:3000/category/addSecondCategoryPic" name="pic1" :on-success='editSuccess' :on-preview="handlePreview" :file-list="fileList" :on-remove="handleRemove" list-type="picture" :before-upload='beforeUpload'>
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCategoryFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSecondCategoryList,
  getFristCategoryList,
  addSecondCategoryList,
  editSecondCategoryList
} from '@/api/index'
export default {
  data () {
    return {
      editCategoryFormVisible: false,
      editForm: {
        id: '',
        brandName: '',
        categoryId: '',
        isDelete: 1,
        brandLogo: '',
        hot: 1
      },
      value: '',
      secondCategoryData: [],
      categoryList: [],
      addCategoryFormVisible: false,
      addForm: {
        brandName: '',
        categoryId: '',
        brandLogo: '',
        hot: 1
      },
      categoryIdList: [],
      editcategoryIdList: [],
      fileList: []
    }
  },
  mounted () {
    this.init()
    this.getCategoryId()
  },
  methods: {
    // 参数为上传的文件
    beforeUpload (file) {
      console.log(file)
    },
    editSubmit () {
      editSecondCategoryList(this.editForm).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.init()
        this.editCategoryFormVisible = false
      })
    },
    editSuccess (res, file, fileList) {
      // console.log(res)
      this.editForm.brandLogo = res.picAddr
      // console.log(this.addForm.pics)
    },
    isDeleteEvent (val) {
      console.log(val)
      this.editForm.isDelete = val
    },
    // 唤出编辑对话框
    handleEdit (row) {
      this.editCategoryFormVisible = true
      console.log(row)
      this.editForm.id = row.id
      this.editForm.brandName = row.brandName
      this.editForm.isDelete = row.isDelete
      this.editcategoryIdList.forEach((value, index) => {
        if (value.id === row.categoryId) {
          this.editForm.categoryId = value.categoryName
        }
        if (row.isDelete === 1) {
          this.value = '启用'
        } else if (row.isDelete === 0) {
          this.value = '禁用'
        }
      })
    },
    init () {
      getSecondCategoryList({ page: this.page, pageSize: this.pageSize }).then(
        res => {
          console.log(res)
          this.secondCategoryData = res.rows
        }
      )
    },
    // 图片上传成功的回调
    uploadSuccess (res, file, fileList) {
      console.log(res)
      this.addForm.brandLogo = res.picAddr
      console.log(this.addForm.pics)
    },
    getCookie () {},
    addBrandSubmit () {
      this.addCategoryFormVisible = true
      this.getCookie()
      this.addForm.categoryId = ''
    },
    getCategoryId () {
      getFristCategoryList({ page: this.page, pageSize: this.pageSize }).then(
        res => {
          this.categoryIdList = res.rows
          this.editcategoryIdList = res.rows
        }
      )
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    addSubmit (fromName) {
      addSecondCategoryList(this.addForm).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.addForm = {}
        this.fileList = []
        this.init()
        this.addCategoryFormVisible = false
      })
    },
    resetForm (formName) {
      console.log(123)
      this.$refs[formName].resetFields()
    },
    changeCid (val) {
      this.addForm.categoryId = val
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
</style>
